<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Login Page</title>
	<!-- 样 式 文 件 -->
	<link rel="stylesheet" href="component/pear/css/pear.css" />
	<link rel="stylesheet" href="admin/css/other/login.css" />
</head>

<style>
	#canvas {
		float: right;
		display: inline-block;
		cursor: pointer;
	}
	.f2 {
		color: #50a42e;
		float: right;
	}
</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<!-- 代 码 结 构 -->
<body  background="admin/images/background.svg" style="background-size: cover;">
<form class="layui-form"  method="post">
	<div class="layui-form-item">
		<img class="logo" src="admin/images/logo.png" />
		<div class="title">SCU BaseLine</div>
		<div class="desc">
			四 川 大 学 基 线 检 测 平 台
		</div>
	</div>
	<div class="layui-form-item">
		<input placeholder="账 户 " value="" lay-verify="required" hover class="layui-input"
			   id = "username" name = "username" type="text">
	</div>
	<div class="layui-form-item">
		<input placeholder="密 码 " value="" lay-verify="required" hover class="layui-input"
			   id ="password" name ="password" type="password"/>
	</div>
	<div class="layui-form-item">
		<input placeholder="验证码 "  value="" required lay-verify="required" class="layui-input layui-input-inline"
			   id = "captcha" name = "captcha" type="text" >
		<canvas id="canvas" width="100" height="43"></canvas>
	</div>
	<div id="change"class="f2">
		看不清换一张
	</div>
	<div class="layui-form-item">
		<input type="checkbox" name="" title="记住密码" lay-skin="primary" checked>
	</div>
	<div>
		<div class="layui-form-item" style="width: 40%;display:inline-block">
			<button type="button" class="pear-btn pear-btn-success login"  id = "registry_submit">
				注 册
			</button>
		</div>
		<div class="layui-form-item action" style="width: 40%;float:right;">
			<button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login" >
				登 入
			</button>
		</div>
	</div>

</form>




<!-- 资 源 引 入 -->
<script src="component/layui/layui.js"></script>
<script src="component/pear/pear.js"></script>



<script tpye="text/javascript">
	layui.use(['form', 'layer', 'jquery'], function () {
		var form = layui.form;
		var $ = layui.jquery;
		var layer = layui.layer;

		$("#registry_submit").click(function () {
			window.location.href = "/registry.html";
		});

		var show_num = [];
		draw(show_num);
		$("#canvas").on('click', function () {
			draw(show_num);
		})

		$("#change").click(function () {
			$("#canvas").click()
			return false;
		})


		form.on('submit(login)', function (data) {
			data = data.field;
			if (data.username === '') {
				layer.msg('用户名不能为空');
				return false;
			}
			if (data.password === '') {
				layer.msg('密码不能为空');
				return false;
			}
			var num = show_num.join("");
			if (data.captcha === '') {
				layer.msg('验证码不能为空');
				return false;
			} else if(data.captcha.toUpperCase() != num.toUpperCase()) {
				layer.msg('验证码输入错误');
				$("#canvas").click()
				return false;
			}

			$.ajax({
				url: "/user/login", // 请求路径
				data: {
					username:data.username,
					password:data.password
				},
				type: "post",                  // 请求的方式，不区分大小写
				cache: false,                  // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
				datatype: "json",        // 返回类型，text文本、html页面、json数据
				success: function (res) {
					console.log("返回: " + res);
					if (res.code === 200) {
						layer.msg("用户登录成功",{icon: 1, time: 500},function(){
							window.location.href = "/index.html";})
					}
					else {
						layer.msg("账号或密码错误!");
					}
				},
				error: function (res){
					console.log("出错返回: " + res);
					layer.msg("服务器连接失败.");
				}
			})

			//防止页面跳转
			return false;
		})
	});

	function draw(show_num) {
		var canvas_width=$('#canvas').width();
		var canvas_height=$('#canvas').height();
		var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
		var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
		canvas.width = canvas_width;
		canvas.height = canvas_height;
		var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
		var aCode = sCode.split(",");
		var aLength = aCode.length;//获取到数组的长度

		for (var i = 0; i <= 3; i++) {
			var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
			var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
			var txt = aCode[j];//得到随机的一个内容
			show_num[i] = txt.toLowerCase();
			var x = 10 + i * 20;//文字在canvas上的x坐标
			var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
			context.font = "bold 23px 微软雅黑";

			context.translate(x, y);
			context.rotate(deg);

			context.fillStyle = randomColor();
			context.fillText(txt, 0, 0);

			context.rotate(-deg);
			context.translate(-x, -y);
		}
		for (var i = 0; i <= 5; i++) { //验证码上显示线条
			context.strokeStyle = randomColor();
			context.beginPath();
			context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			context.stroke();
		}
		for (var i = 0; i <= 30; i++) { //验证码上显示小点
			context.strokeStyle = randomColor();
			context.beginPath();
			var x = Math.random() * canvas_width;
			var y = Math.random() * canvas_height;
			context.moveTo(x, y);
			context.lineTo(x + 1, y + 1);
			context.stroke();
		}
	}

	function randomColor() {//得到随机的颜色值
		var r = Math.floor(Math.random() * 256);
		var g = Math.floor(Math.random() * 256);
		var b = Math.floor(Math.random() * 256);
		return "rgb(" + r + "," + g + "," + b + ")";
	}

</script>
</body>
</html>